<!--
 * @Descripttion: 人员通行
 * @version:
 * @Author: wl
 * @Date: 2020-05-21 17:00:50
 * @LastEditors: wl
 * @LastEditTime: 2020-08-10 14:16:14
-->

<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form :inline="true" :model="filters" label-position="right">
          <el-form-item label="选择小区：">
            <el-select
              v-model="filters.CID"
              filterable
              @change="handleQuery"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in getCommunity"
                :key="item.CID"
                :label="item.name"
                :value="item.CID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名：">
            <el-input
              v-model="filters.personName"
              placeholder="请输入内容"
              clearable
              @change="handleQuery"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证：">
            <el-input
              v-model="filters.Idcard"
              placeholder="请输入内容"
              clearable
              @change="handleQuery"
            ></el-input>
          </el-form-item>
          <el-form-item label="起始时间：">
            <el-date-picker
              v-model="filters.startTime"
              class="normal"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              clearable
               @change="handleQuery"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间：">
            <el-date-picker
              v-model="filters.endTime"
              class="normal"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              clearable
               @change="handleQuery"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div slot="btnSearch">
        <el-button type="primary" @click="handleQuery('a')">查询</el-button>
      </div>
      <div slot="content">
        <el-table
          :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          :data="pageResult"
          stripe
          v-loading="loading"
          style="width: 100%"
          element-loading-text="加载中..."
        >
          <!-- <el-table-column
            prop="picImg"
            header-align="center"
            align="center"
            label="人像"
          >
            <template slot-scope="scope">
              <img
                :src="scope.row.picImg"
                alt
                style="width: 50px; height: 50px"
                v-image-preview
              />
            </template>
          </el-table-column> -->
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="姓名"
          >
          <template slot-scope="scope">
              <span v-if="photoCheck == scope.row.photoCheck">{{
                scope.row.info.persionName
              }}</span>
              <span v-else>{{ scope.row.name}}</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="CName"
            header-align="center"
            align="center"
            label="小区名称"
          >
          </el-table-column>
          <el-table-column
            prop="Idcard"
            header-align="center"
            align="center"
            label="身份证号"
          >
           <template slot-scope="scope">
              <span v-if="photoCheck == scope.row.photoCheck">{{
                scope.row.person.info.Idcard
              }}</span>
              <span v-else>{{ scope.row.Idcard}}</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="type"
            header-align="center"
            align="center"
            label="陌生人"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type == 0" class="fontColor">是</span>
              <span v-if="scope.row.type == 1">否</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="IName"
            header-align="center"
            align="center"
            label="设备点位"
          >
          </el-table-column> -->
          <el-table-column
            prop="direction"
            header-align="center"
            align="center"
            label="进出方向"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.direction === 2">出</span>
              <span v-if="scope.row.direction === 1">进</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="deviceid"
            header-align="center"
            align="center"
            label="人员类型"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.person && scope.row.person.type">{{
                scope.row.person.type
                  ? types.find((item) => {
                      return item.DID == scope.row.person.type;
                    }).name
                  : "-"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="insertTime"
            header-align="center"
            align="center"
            label="通行时间"
          ></el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="handleEdit(scope.row)"
                :disabled="!hasPerm('pass:personpass:details')"
                >查看照片</el-button
              >
                <el-button
                type="warning"
                size="mini"
                :disabled="!hasPerm('news:blacklistw:show')"
                @click="checkPhoto(scope.row)"
                >查看</el-button
              >
            </template>

          </el-table-column>
        </el-table>

        <!-- 弹框 -->
        <el-dialog
          :visible.sync="dialogVisible"
          :before-close="handleClose"
          width="30%"
        >
          <img
            style="width: 100%"
            :src="getItemPhoto(currentImg)"
            class="imgDia"
          />
        </el-dialog>
      </div>
      <div slot="footer">
        <!-- <el-button :disabled="selections.length === 0"  type="danger"
        style="float:left" @click="batchDelete">批量删除</el-button>-->
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.limit"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
        <!-- :page-size="pageRequest.limit" -->
        <!-- <el-pagination
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          layout="prev, next"
          :page-size="pageRequest.limit"
          :total="totalSize"
          style="float: right"
          prev-text="上一页"
          next-text="下一页"
          @prev-click="prevPage"
          @next-click="nextPage"
        >
        </el-pagination> -->
      </div>
    </page>
    <!-- 详情的弹窗 -->
  </div>
</template>

<script>
//  import viewPage from "./comments/viewPage.vue"

export default {
  components: {},
  data() {
    return {
      currentImg: "",
      dialogVisible: false,
      aside: false,
      asideShow: false,
      unitShow: false,
      viewVisible: false,
      pageResult: [],
      selections: [],
      dataFormView: [],
      filters: {
        CID: "",
        startTime: "",
        endTime: "",
        status: "",
        type: 1,
        Sex: "",
        personName: "",
        Idcard: "",
      },
      pageRequest: {
        page: 1,
        limit: 10,
      },
      columns: [],
      loading: false,
      totalSize: 0,
      options: [
        {
          value: 0,
          label: "陌生人",
        },
        {
          value: 1,
          label: "非陌生人",
        },
      ],
      types: [],
      optionsSex: [
        {
          value: 0,
          label: "男",
        },
        {
          value: 1,
          label: "女",
        },
      ],
      getCommunity: [],
       photoCheck: 0,
    };
  },
  methods: {
      //查看
    checkPhoto(row){
      if (row.photoCheck == this.photoCheck) {
        this.photoCheck = 0;
      } else {
        this.photoCheck = row.photoCheck;
      }
    },
    //名字脱敏
    formatName(name) {
    var newStr;
    if (name.length === 2) {
        newStr = name.substr(0, 1) + '*';
    } else if (name.length > 2) {
        var char = '';
        for (var i = 0, len = name.length - 2; i < len; i++) {
            char += '*';
        }
        newStr = name.substr(0, 1) + char + name.substr(-1, 1);
    } else {
        newStr = name;
    }
    return newStr;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 获取分页数据
    handleQuery: function (val) {
      this.loading = true;
      let params = {};
      params = {
        where: this.filters,
        page: val ? "" : this.pageRequest.page,
        // limit: val ? "" : this.pageRequest.limit,
        limit: 10,
      };

      let param = JSON.stringify(params);

      this.$api.personPass
        .blackList_personPass_list(params)
        .then((res) => {
          if (res.code == 0) {
            this.loading = false;
            this.pageResult = res.data;
            this.totalSize = res.count;
            this.pageResult.map((item,index) => {
              item.insertTime = this.$format(item.insertTime);
              if (item.info) {
                item.name = this.formatName(item.info.persionName) || "-";
              }
              if (item.device) {
                item.IName = item.device.Name;
              }
              item.photoCheck=index+1
              if (item.person) {
                item.Idcard =
                  item.person.info.Idcard.slice(0, 4) +
                    "****" +
                    item.person.info.Idcard.slice(16, 18) || "";
                // }
              } else {
                item.Idcard = "-";
              }
              item.picImg = this.global.baseUrlImage + "pic/" + item.pic;
            });
          } else {
            this.loading = false;
            this.$message({ message: "操作失败, " + res.msg, type: "error" });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message({
            type: "error",
            message: "请求超时" + err,
          });
        });
    },

    // 拼接图片
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + "pic/" + id;
      return url;
    },
    //获取小区的列表选择器
    getCommunityList() {
      let params = {};
      params = {
        where: {
          CODES: [],
        },
      };

      let param = JSON.stringify(params);

      this.$api.three.communityList(params).then((res) => {
        if (res.code == 0) {
          this.getCommunity = res.data;
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    handleEdit: function (params) {
      if (params.pic) {
        this.currentImg = params.pic;
      }
      this.dialogVisible = true;
    },
    //删除
    handleDelete(row) {
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning",
      }).then(() => {
        // let params = this.getDeleteIds([], row);
        let params = {
          DID: row.DID,
        };

        var paramJson = JSON.stringify(params);
        this.$api.dict.batchDelete(paramJson).then((res) => {
          if (res.code == 0) {
            this.handleQuery();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "操作失败, " + res.msg,
              type: "error",
            });
          }
        });
      });
    },
    // 批量删除
    batchDelete() {
      this.$confirm("确认删除选中用户吗？", "提示", "warning").then(() => {
        let selLength = this.selections.length;
        let totalLength = this.pageResult.length;
        let isReduce = selLength == totalLength ? true : false;
        let params = this.selections
          .map((item) => {
            return item.DID;
          })
          .join(",");
        this.$api.dict
          .batchDelete({
            DID: params,
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              if (isReduce) {
                this.pageRequest.page--;
              }
              this.handleQuery();
            } else {
              this.$message.error(res.msg);
            }
          });
      });
    },
    // 编辑
    submitForm: function () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign(this.dataForm);

            let paramJson = JSON.stringify(params);
            this.$api.dict.save(paramJson).then((res) => {
              this.editLoading = false;
              if (res.code == 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });

                this.$refs["dataForm"].resetFields();
              } else {
                this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error",
                });
              }
              this.handleQuery(null);
            });
          });
        }
      });
    },
    refreshPageRequest(page) {
      this.pageRequest.page = page;
      this.handleQuery();
    },
    handleSelectionChange(val) {
      this.selections = val;
    },
  },
  mounted() {
    let dictList = JSON.parse(sessionStorage.getItem("dictData"));
    this.types = dictList.sys_person_type;
    // console.log(this.types);
    this.handleQuery();
    this.getCommunityList();
  },
};
</script>

<style scoped>
.el-dialog__body {
  display: flex;
  justify-content: center !important;
}
.fontColor {
  color: red;
}
</style>
